<template>
  <div class="relative h-full w-full flex-1 overflow-auto transition-width box-border">
    <div class="  flex h-full flex-col focus-visible:outline-0 box-border">
      <div class="flex-1 overflow-hidden @container/thread">
        <div class="h-full">
          <div class=" overflow-auto h-full">
            <div class="flex flex-col text-sm md:pb-9 box-border px-30 pt-20">
              <!-- 对话 -->
              <div v-for="(item, index) in store.currentQA">
                <!-- 图片 -->
                <template v-if="item.role === 'user'">
                  <div v-for="data in item.content">
                    <div v-if="data.type === 'image_url'"
                      class="rounded-md px-3 py-2 bg-[#d2f9d1] dark:bg-[#a1dc95] mr-40px"
                      style="width: fit-content; float: right;">
                      <img :src="data.image_url.url" alt="">
                    </div>
                  </div>
                </template>
                <Message :text="item.role === 'user' ? handleUserData(item.content) : item.content"
                  :inversion="item.role === 'user'" :loading="false" :asRawText="false" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="{
        'new-chat-container': store.isNewChat && store.currentQA.length === 0
      }" class="md:pt-0 dark:border-white/20 md:border-transparent md:dark:border-transparent w-full box-border">
        <div class="m-auto text-base px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5 box-border">
          <div
            class="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] box-border">
            <form class="w-full" type="button">
              <div v-if="store.isNewChat && store.currentQA.length === 0"
                class="mb-7   text-center @lg/thread:block c-black  ">
                <div class="relative inline-flex justify-center text-center text-2xl font-semibold leading-9">
                  <h1 class="font-size-8 font-600">有什么可以帮忙的？</h1>
                </div>
              </div>
              <div class="relative flex h-full max-w-full flex-1 flex-col">
                <div class="group relative flex w-full items-center">
                  <div
                    class="flex box-border w-full cursor-text flex-col rounded-3xl px-2.5 py-1 transition-colors contain-inline-size bg-[#f4f4f4] dark:bg-token-main-surface-secondary">
                    <div v-show="store.images.length" class="flex my-2">
                      <div v-for="(item, index) in store.images" :key="index" class="w-16 h-16 mr-2 pos-relative">
                        <div
                          class="pos-absolute w-5 h-5 top--2 right--2 cursor-pointer border-rd-50% bg-white flex justify-center items-center "
                          @click="store.deleteImg(index)">
                          <!-- 一个标准的x形状的svg -->
                          <img class="w-2 h-2" src="../assets/X.png" alt="">
                        </div>
                        <img :src="item" class="w-full h-full object-cover">
                      </div>
                    </div>
                    <div class="flex min-h-[44px] items-start pl-2 box-border">
                      <div class="min-w-0 max-w-full flex-1 box-border">
                        <div class=" max-h-[25dvh] max-h-52 overflow-auto default-browser box-border">
                          <textarea ref="textarea"
                            class="block h-64px w-full box-border resize-none border-0 bg-transparent px-0 py-2 text-token-text-primary placeholder:text-token-text-secondary"
                            placeholder="给“ChatGPT”发送消息" autofocus data-virtualkeyboard="true" @keydown="send"
                            :value="store.inputValue" @input="inputChange" @paste="paste"></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex h-[44px] items-center justify-between"></div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div style="height: 32px;"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUsetStore } from '@/store';
import { uploadImg } from '@/api';
import { Message } from '@/page/chat/components';
import Text from '@/page/chat/components/Message/Text.vue';
const store = useUsetStore();

const inputChange = (e: any) => {
  store.setInputValue(e.target.value)
}
const send = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    // 触发按钮点击事件
    store.getData(store.inputValue)
    store.clearImages()
    store.setInputValue('')
  }
}
const textarea = ref<HTMLTextAreaElement | null>(null);

const handleUserData = (data: any) => {
  if (!data || !Array.isArray(data) || data.length === 0) return data
  return data.map((item: any) => item.text).join('')
}

const paste = (e: ClipboardEvent) => {
  // 讲粘贴的图片放到 images
  const items = e.clipboardData?.items;
  console.log(items);

  if (items) {
    for (let i = 0; i < items.length; i++) {

      const item = items[i];
      console.log(item.type)
      if (item.type.startsWith('image')) {
        const blob = item.getAsFile();
        console.log(blob);
        const path = URL.createObjectURL(blob!);
        if (blob && path) {
          const index = store.images.length - 1
          store.setImages(path);
          const formData = new FormData();
          formData.append('file', blob);
          uploadImg(formData).then((res) => {
            store.setImages(res.data, index)
            console.log(store.images);

          })
        }
      }
    }
  }
}

onMounted(() => {
  textarea.value?.addEventListener('input', () => {
    textarea.value!.style.height = 'auto'; // Reset height to auto to calculate new height
    textarea.value!.style.height = textarea.value!.scrollHeight + 'px'; // Set height to scrollHeight
  });
});
</script>
<style scoped lang="less">
textarea {
  color: #0d0d0d;
  font-size: 1rem;
  line-height: 1.5rem;
  appearance: none;

  &:focus {
    outline: none;
  }

  /* 不显示边框 */
  border: none;
}

.new-chat-container {
  height: 50vh !important;
}
</style>